<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用选择</title>
    <style>
        .content {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* Align at the top and left */
            padding-top: 20px; /* Add some padding from the top */
            margin-left: 20px; /* Align with the first dropdown */
        }

        .select-container, #submitBtn {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        select, input {
            outline: none;
        }

        .process-flow {
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* Align with the first dropdown */
            margin-top: 20px;
            position: relative;
        }

        .process-step {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            position: relative;
        }

        .circle {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 10px;
            position: relative;
            z-index: 1;
        }

        .gray { background-color: gray; }
        .green { background-color: green; }
        .red { background-color: red; }
        .blue { background-color: blue; }

        .line {
            position: absolute;
            left: 10px;
            top: 20px;
            width: 2px;
            height: 30px;
            background-color: gray;
            z-index: 0;
        }
    </style>
</head>
<body>
    <!-- 主体部分 -->
    <div class="content">
        <div class="select-container">
            <select name="sel1" id="sel1" class="form-select" style="min-width: 200px; padding: 8px; border-radius: 4px; border: 1px solid #ddd;">
                <option value="">请选择机器人</option>
            </select>
            <div id="loading1" style="display: none; margin-top: 5px;">
                <span class="spinner-border spinner-border-sm"></span> 加载中...
            </div>
        </div>

        <div class="select-container">
            <select name="sel2" id="sel2" class="form-select" style="min-width: 200px; padding: 8px; border-radius: 4px; border: 1px solid #ddd;">
                <option value="">请选择程序</option>
            </select>
            <div id="loading2" style="display: none; margin-top: 5px;">
                <span class="spinner-border spinner-border-sm"></span> 加载中...
            </div>
        </div>

        <!-- New input box for parameters -->
        <div class="select-container">
            <input type="text" id="paramInput" class="form-select" style="min-width: 200px; padding: 9px; border-radius: 4px; border: 1px solid #ddd;" placeholder="输入参数；多个参数用分号隔开">
        </div>
        <div class="select-container">
            <button id="submitBtn" style="display: flex; justify-content: center; align-items: center; border-radius: 5px; border: 1px solid #ddd; width: 100px; height: 38px; background-color: #007bff; color: white;">提交</button>
        </div>

        <!-- Process Flow -->
        <div class="process-flow">
            <div class="process-step">
                <div class="circle gray" id="step1"></div>
                <span>未提交</span>
                <div class="line"></div>
            </div>
            <div class="process-step">
                <div class="circle gray" id="step2"></div>
                <span>程序正在运行中</span>
                <div class="line"></div>
            </div>
            <div class="process-step">
                <div class="circle gray" id="step3"></div>
                <span>程序执行完成</span>
            </div>
        </div>
    </div>

    <!-- 引入jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            // Fetch robots data using $.ajax
            $.ajax({
                url: 'robot.json',
                type: 'GET',
                dataType: 'json',
                success: function(robots) {
                    // Populate the robot dropdown
                    robots.forEach(robot => {
                        $('#sel1').append(`<option value="${robot.id}">${robot.name}</option>`);
                    });
                },
                error: function() {
                    console.error('Failed to fetch robots data.');
                }
            });

            // Handle robot selection
            $('#sel1').change(function() {
                const robotId = $(this).val();
                if (robotId) {
                    $('#sel2').empty().append('<option value="">加载中...</option>');

                    // Fetch programs data using $.ajax
                    $.ajax({
                        url: 'app.json',
                        type: 'GET',
                        dataType: 'json',
                        success: function(programs) {
                            const selectedPrograms = programs[robotId] || [];
                            $('#sel2').empty().append('<option value="">请选择程序</option>');
                            selectedPrograms.forEach(program => {
                                $('#sel2').append(`<option value="${program}">${program}</option>`);
                            });
                        },
                        error: function() {
                            console.error('Failed to fetch programs data.');
                        }
                    });
                } else {
                    // If no robot is selected, clear the program dropdown
                    $('#sel2').empty().append('<option value="">请选择程序</option>');
                }
            });

            // Handle submit button click
            $('#submitBtn').click(function() {
                const selectedRobot = $('#sel1').val();
                const selectedProgram = $('#sel2').val();
                const inputParam = $('#paramInput').val();

                // Validate that all fields are filled
                if (!selectedRobot || !selectedProgram || !inputParam) {
                    alert('请确保所有字段都已填写。');
                    return;
                }

                // Immediately update the first step to green to indicate submission
                $('#step1').removeClass('gray').addClass('green');

                // Simulate the process of running the program
                $('#step2').removeClass('gray').addClass('blue');

                // Send data to the server
                $.ajax({
                    url: 'https://www.xxx.com', // Replace with your actual URL
                    type: 'POST',
                    data: {
                        robot: selectedRobot,
                        program: selectedProgram,
                        parameter: inputParam
                    },
                    success: function(response) {
                        console.log('Data submitted successfully:', response);
                        $('#step2').removeClass('blue').addClass('green');
                        $('#step3').removeClass('gray').addClass('green');
                    },
                    error: function() {
                        console.error('Failed to submit data.');
                        $('#step2').removeClass('blue').addClass('red');
                    }
                });
            });
        });
    </script>
</body>
</html>